<template>
  <div id="app">
    <p v-if="accountList.length>0">
      共收到{{ accountList.length }}条<a :href="dataUrl">数据</a>。
    </p>
    <table>
      <caption>用户信息表</caption>
      <tr>
        <th scope="col">序号</th>
        <th scope="col">用户名</th>
        <th scope="col">密码</th>
        <th scope="col">姓名</th>
        <th scope="col">身份证号</th>
        <th scope="col">籍贯</th>
        <th scope="col">手机号</th>
      </tr>
      <tr v-for="(account,index) in accountList" :key="index">
        <th scope="row"><a :href="dataUrl+'/'+account.username">{{ index + 1 }}</a></th>
        <td>{{ account.username }}</td>
        <td>{{ account.passwd }}</td>
        <td>{{ account.name }}</td>
        <td>{{ account.idnumber }}</td>
        <td>{{ account.hometown }}</td>
        <td>{{ account.phone }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  components: {},
  data() {
    return {
      dataUrl: 'http://localhost:1234/account',
      accountList: [],
    }
  },
  methods: {
    getAccountList() {
      axios.get(this.dataUrl)
          .then(response => {
            this.accountList = response.data;
            console.log("Fetched " + this.accountList.length + " accounts.");
          });
    },
  },
  computed: {},
  created() {
    this.getAccountList()
  },
  mounted() {
  },
}
</script>

<style>
td,
th {
  border: 1px solid rgb(190, 190, 190);
  padding: 10px;
}

td {
  text-align: center;
}

tr:nth-child(even) {
  background-color: #eee;
}

th[scope="col"] {
  background-color: #696969;
  color: #fff;
}

th[scope="row"] {
  background-color: #d7d9f2;
}

caption {
  padding: 10px;
  caption-side: bottom;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(200, 200, 200);
  letter-spacing: 1px;
  font-family: sans-serif;
  font-size: .8rem;
}
</style>
